<template>
    <div>
      <h1>将class属性绑定为数组</h1>
      <div :class="[activeclass, borderclass]">11</div>
      <div :class="[isactive ? activeclass : '', isborder ? borderclass : '']">
        22
      </div>
      <div :class="[{ active: isactive }, borderclass]">33</div>
      <button @click="isactive = !isactive">bg切换</button>
      <button @click="isborder = !isborder">bk切换</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  const activeclass = "active";
  const borderclass = "border";
  const isactive = ref(true);
  const isborder = ref(true);
  </script>
  
  <style>
  .active {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .border {
    border: 2px solid rgb(58, 239, 18);
  }
  </style>
  